<template>
  <div>
    <div style="margin: 10px">
      <div style="float: left; margin-bottom: 15px">
        单位 <el-cascader
            style="margin-left: 10px; margin-right: 20px; width: 255px"
            placeholder="请选择单位"
            ref="dwref"
            v-model="dwid"
            @change=""
            :options="dwoptions"
            :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id', emitPath: false }"
            clearable>
        </el-cascader>
        报警点 <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="报警点" suffix-icon="el-icon-search"
                  v-model="bjd"/>
        报警类型 <el-select style="margin-left: 10px; margin-right: 10px" v-model="bjlx" clearable placeholder="报警类型" filterable
                   >
          <el-option
              label="油井"
              value="油井">
          </el-option>
        </el-select>
        报警描述 <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="报警描述" suffix-icon="el-icon-search"
                         v-model="msxx"/>
        <div style="float: left; margin-top: 10px">
          起止时间 <el-date-picker
            style="margin-left: 10px"
              v-model="datearr"
              type="datetimerange"
              value-format = "yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
          </el-date-picker>
          <el-button style="margin-left: 10px" type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        </div>

      </div>
    </div>
    <el-table ref="table" @selection-change="" :data="tableData"
              style="margin: 10px; width: 1600px" border stripe>
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="60" v-if="false">
      </el-table-column>
      <el-table-column prop="dwObj.dwname" label="单位" width="100">
      </el-table-column>
      <el-table-column prop="bjd" label="报警点" width="80">
      </el-table-column>
      <el-table-column prop="lx" label="类型" width="70">
      </el-table-column>
      <el-table-column prop="bjsj" label="报警时间" width="200">
      </el-table-column>
      <el-table-column prop="msxx" label="报警描述" width="400">
      </el-table-column>
      <el-table-column prop="qrrObj.username" label="确认人" width="100">
      </el-table-column>
      <el-table-column prop="qrsj" label="确认时间" width="180">
      </el-table-column>
      <el-table-column prop="clrObj.username" label="处理人" width="100">
      </el-table-column>
      <el-table-column prop="clsj" label="处理时间" width="180">
      </el-table-column>
      <el-table-column prop="clxx" label="处理信息" width="">
      </el-table-column>
    </el-table>
    <div class="block" style="padding: 5px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";
import {formatDateTime} from "@/utils/formatDateTime";


export default {
  created() {
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
            let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")

            this.datearr=[starttime,endtime]
            this.load();

          }
        }
    )

  },
  data() {
    return {
      dwoptions: [],
      dwid: null,
      dwval: [],
      bjd: null,
      bjlx: null,
      msxx: null,
      datearr: [],
      pickerOptions: {
        shortcuts: [ {
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      tableData: [],
      pageSize: 10,
      total: 100,
      currentPage: 1,

      formLabelWidth: '150px'
    }
  },
  methods: {
    load() {
      service.get('/bj/getpage', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.currentPage,
          dw: this.dwid,
          bjd: this.bjd,
          bjlx: this.bjlx,
          desc: this.desc,
          startdate: this.datearr[0],
          enddate: this.datearr[1]
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );

    },

    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    search() {
      // this.currentPage = 1
      this.load()
    }
  }
}
</script>

<style scoped>

</style>
